<template>
  <div class="app-container">
    <h2 style="text-align: center;">提交材料</h2>
    <el-form label-width="120px">

      <el-form-item label="成果名称" prop="name" style="width: 350px;">
        <el-input v-model="material.designation" clearable placeholder="请如实填写"></el-input>
      </el-form-item>

      <el-form-item label="提交类别" >
        <!--一级分类-->
        <el-select
          v-model="material.subjectParentId"
          clearable placeholder="提交类别" @change="subjectLevelOneChanged">
          <el-option
            v-for="bus in subjectNestedList"
            :key="bus.id"
            :label="bus.title"
            :value="bus.id"
          />
        </el-select>
        <!-- 二级分类-->
        <el-select
          v-model="material.subjectId" label="二级分类"
          placeholder="请选择">
          <el-option
            v-for="bus in subSubjectList"
            :key="bus.id"
            :label="bus.title"
            :value="bus.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="上传文件" >
        <div id="app">
          <input type="file" ref="fileInput">
          <button @click="selectFile">确定选中</button>
          <div v-if="selectedFile" class="selected-file">
            <span>{{ selectedFile.name }}</span>
            <button @click="cancelSelectedFile">取消</button>
          </div>
        </div>
        <p style="color: #666; font-size: 14px; margin-top: 10px;">提示：请提交 PDF 格式的文件</p>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="isSubmitDisabled" type="primary" @click="subOSS()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as teacher from '@/api/edu/eduTeacher'

export default {
  data() {
    return {
      material:{
        jobNumber:'', // 教师工号
        name:'', // 教师姓名
        designation:'', // 成果名称
        bus:'', // 提交类别
        busId:'',
        actCategory:'', // 活动类别
        materials:'', // 支撑材料，文件名称
        title: '', //课程标题
        subjectParentId:'', //一级分类
        subjectId:'' //二级分类
      },
      selectedFile: null,
      fileList:[],
      subjectNestedList:[], //装后端提交过来的活动类别
      subSubjectList:[], //装后端提交过来的活动类别
      saveBtnDisabled:false  // 提交按钮是否禁用,
    }
  },
  created() {
    // this.getBus()
    //一级分类遍历出来
    this.initSubjectList()
    // this.getInfo()
  },
  computed: {
    isSubmitDisabled() {
      // 当成果名称或提交类别为空时，返回true，禁用提交按钮
      return !this.material.designation || !this.material.subjectParentId || !this.selectedFile || !this.material.subjectId;
    }
  },
  methods: {
    initSubjectList(){
      teacher.getBus().then(response => {
        this.subjectNestedList = response.data.list;
        console.log(response.data.list)
        // 设置初始值
        if (this.subjectNestedList.length > 0) {
          this.material.subjectParentId = this.subjectNestedList[0].id;
          this.subSubjectList = this.subjectNestedList[0].children;
        }
      })
    },
    subjectLevelOneChanged(value){
      for(let i = 0; i < this.subjectNestedList.length; i++) {
        if (this.subjectNestedList[i].id === value) {
          this.subSubjectList = this.subjectNestedList[i].children;
          this.material.subjectId = ''; // 清空二级分类的值
          break; // 找到匹配的一级分类后退出循环
        }
      }
    },
    //进行一级遍历
    // getOne(){
    //   teacher.getOne().then(response => {
    //     this.busOne = response.data().list
    //   })
    // },
    // getBus(){
    //   teacher.getBus().then(response => {
    //     this.busOne = response.data.list
    //   })
    // },
    selectFile() {
      const file = this.$refs.fileInput.files[0];
      this.selectedFile = file;
    },
    cancelSelectedFile() {
      this.selectedFile = null;
    },
    subOSS(){
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      console.log(this.material.subjectId)
      teacher.subFileOss(formData,this.material.designation,this.material.subjectId).then(response => {
        this.$message({
          message: "上传成功",
          type: 'success'
        });
        this.teacher = null;
        this.$router.push({path:'/adminTeacher/list'});
      })
    },
  }
}
</script>

<style>
.selected-file {
  margin-top: 10px;
}

.selected-file span {
  margin-right: 5px;
}

.selected-file button {
  padding: 5px 10px;
  background-color: #f00;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>
